<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/zTree/v3/css/metroStyle/metroStyle.css" type="text/css">
</head>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<form class="form form-horizontal" id="form-organization" method="post" onsubmit="return submitOrganization();">
			<section class="content" style="margin: 15px; background-color: white;">
			<div class="row">
				<div class="col-sm-3">
					<input id="organizationId" name="organizationId" type="hidden" value="" /> <input id="parentId" name="parentId" type="hidden" value="" />
					<ul id="organizationTree" class="ztree" style="margin: 10px 0 0 15px;"></ul>
				</div>
				<div class="col-sm-9">
					<div class="col-sm-12">
						<div class="row">
							<div class="btn-group btn-default">
								<button type="button" class="glyphicon glyphicon-plus btn btn-primary btn-sm" onclick="addOrganization('peer');">新建部门</button>
							</div>
							<div class="btn-group btn-default">
								<button type="button" class="glyphicon glyphicon-plus btn btn-primary btn-sm" onclick="addOrganization('lower');">新建下级部门</button>
							</div>
							<div class="btn-group btn-default">
								<button type="button" class="glyphicon glyphicon-pencil btn btn-primary btn-sm" onclick="editOrganization();">编辑</button>
							</div>
							<div class="btn-group btn-default">
								<button type="button" class="glyphicon glyphicon-trash btn btn-danger btn-sm" onclick="delOrganization();">删除</button>
							</div>
						</div>
						<br />
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">部门名称：</span> <input type="text" class="form-control" id="organizationName" name="organizationName" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">部门编号：</span> <input type="text" onchange="checkCode();" class="form-control" id="organizationCode" name="organizationCode" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<!-- 						<div class="row"> -->
						<!-- 							<div class="input-group"> -->
						<!-- 								<span class="input-group-addon">上级组织：</span> <input type="text" class="form-control" id="parentName" name="parentName" value="" disabled="disabled"> -->
						<!-- 							</div> -->
						<!-- 						</div> -->
						<!-- 						<br /> -->
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">负责人：</span> <input type="text" class="form-control" id="organizationPrincipal" name="organizationPrincipal" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<!-- 						<div class="row"> -->
						<!-- 							<div class="input-group"> -->
						<!-- 								<span class="input-group-addon">最后修改人：</span> <input type="text" class="form-control" id="editAccount" name="editAccount" value="" disabled="disabled"> -->
						<!-- 							</div> -->
						<!-- 						</div> -->
						<!-- 						<br /> -->
						<!-- 						<div class="row"> -->
						<!-- 							<div class="input-group"> -->
						<!-- 								<span class="input-group-addon">修改时间：</span> <input type="text" class="form-control" id="editTime" name="editTime" value="" disabled="disabled"> -->
						<!-- 							</div> -->
						<!-- 						</div> -->
						<!-- 						<br /> -->
						<div class="row">
							<div class="input-group">
								<span class="input-group-addon">备注：</span> <input type="text" class="form-control" id="remark" name="remark" value="" disabled="disabled">
							</div>
						</div>
						<br />
						<div class="row">
							<div class="btn-group btn-default">
								<button id="submitBtn" class="btn btn-primary btn-sm hidden" type="submit">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
							</div>
							<div class="btn-group btn-default">
								<button id="cancelBtn" class="btn btn-danger btn-sm hidden" type="button" onclick="cancelEdit()">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</form>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/plugins/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script>
	var zTree;
	var checkedNode = null;
	var url;
	var checkCodeFlag = false;

	var setting = {
		data : {
			key : {
				children : 'children',
				name : 'organizationName'
			}
		},
		view : {
			txtSelectedEnable : true
		},
		callback : {
			onClick : function(event, treeId, treeNode) {
				checkedNode = treeNode;
				nodeClick(treeNode);
			}
		}
	};

	$(function() {
		loadTree();
	});

	function loadTree() {
		//查询组织树,初始化ztree
		$.ajax({
			url : "${pageContext.request.contextPath}/selectOrganizationTree",
			type : "get",
			dataType : "json",
			async : true,
			success : function(data) {
				if (data.length > 0) {
					$.fn.zTree.init($("#organizationTree"), setting, data);
					zTree = $.fn.zTree.getZTreeObj("organizationTree");
					zTree.expandAll(true);
				} else {
					resetOrganization();
					url = '${pageContext.request.contextPath}/insertOrganization';
					layer.alert('请先添加一个根节点!');
					checkCodeFlag = true;
				}
			},
			error : function(error) {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});
	}

	function nodeClick(treeNode) {
		if (treeNode !== null) {
			$('#organizationId').val(treeNode.organizationId);
			$('#organizationName').val(treeNode.organizationName);
			$('#organizationCode').val(treeNode.organizationCode);
			$('#organizationPrincipal').val(treeNode.organizationPrincipal === undefined ? '' : treeNode.organizationPrincipal);
			$('#remark').val(treeNode.remark === undefined ? '' : treeNode.remark);
			$('#editAccount').text(treeNode.editAccount);
			$('#editTime').text(treeNode.editTime === undefined ? '' : treeNode.editTime);
			var parentNode = treeNode.getParentNode();
			$('#parentName').text(parentNode === null ? '' : parentNode.organizationName);
		}
	}

	//验证编号是否被使用
	function checkCode() {
		$.ajax({
			url : "${pageContext.request.contextPath}/checkOrganizationCode",
			type : "post",
			dataType : "json",
			async : false,
			data : {
				organizationCode : $('#organizationCode').val()
			},
			success : function(data) {
				if (data.result === 0) {
					checkCodeFlag = true;
				} else {
					checkCodeFlag = false;
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});
	}

	//提交表单
	function submitOrganization() {
		if ($('#organizationName').val() === '' || $('#organizationName').val() === null) {
			layer.alert('请输入组织名称！');
			return false;
		}
		if ($('#organizationCode').val() === '' || $('#organizationCode').val() === null) {
			layer.alert('请输入组织编号！');
			return false;
		}
		if ($('#organizationId').val() === '' && !checkCodeFlag) {
			layer.alert('组织编号已被使用！');
			return false;
		}

		$.ajax({
			url : url,
			type : "post",
			dataType : "json",
			async : false,
			data : $('#form-organization').serialize(),
			success : function(data) {
				if (data.result === 0) {
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					$('#cancelBtn').addClass('hidden');
					$('#submitBtn').addClass('hidden');
					$('#organizationName').prop('disabled', true);
					$('#organizationCode').prop('disabled', true);
					$('#organizationPrincipal').prop('disabled', true);
					$('#remark').prop('disabled', true);
					loadTree();
				} else {
					layer.msg('系统繁忙，请稍后再试!', {
						icon : 2,
						time : 800
					});
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
				return false;
			}
		});

		return false;
	}

	//编辑
	function editOrganization() {
		if ($('#organizationId').val() === '') {
			layer.alert('请先选择组织！');
		} else {
			$('#cancelBtn').removeClass('hidden');
			$('#submitBtn').removeClass('hidden');
			$('#organizationName').prop('disabled', false);
			$('#organizationPrincipal').prop('disabled', false);
			$('#remark').prop('disabled', false);
			url = '${pageContext.request.contextPath}/updateOrganization';
		}
	}

	//取消
	function cancelEdit() {
		$('#cancelBtn').addClass('hidden');
		$('#submitBtn').addClass('hidden');
		$('#organizationName').prop('disabled', true);
		$('#organizationCode').prop('disabled', true);
		$('#organizationPrincipal').prop('disabled', true);
		$('#remark').prop('disabled', true);
		nodeClick(checkedNode);
	}

	//新增
	function addOrganization(level) {
		if (checkedNode === null) {
			layer.alert('请先选择组织！');
			return;
		}
		if (level === 'peer') {
			if (checkedNode.getParentNode() === null) {
				layer.alert('顶级组织只能创建一个！');
				return;
			}
			$('#parentId').val(checkedNode.getParentNode().organizationId);
			$('#parentName').text(checkedNode.getParentNode().organizationName);
		} else if (level === 'lower') {
			$('#parentId').val(checkedNode.organizationId);
			$('#parentName').text(checkedNode.organizationName);
		}
		resetOrganization();
		url = '${pageContext.request.contextPath}/insertOrganization';
	}

	function resetOrganization() {
		$('#organizationId').val('');
		$('#organizationName').val('');
		$('#organizationCode').val('');
		$('#organizationPrincipal').val('');
		$('#remark').val('');

		$('#cancelBtn').removeClass('hidden');
		$('#submitBtn').removeClass('hidden');
		$('#organizationName').prop('disabled', false);
		$('#organizationCode').prop('disabled', false);
		$('#organizationPrincipal').prop('disabled', false);
		$('#remark').prop('disabled', false);
	}

	//删除
	function delOrganization() {
		console.log(checkedNode)
		if (checkedNode === null) {
			layer.alert('请先选择组织！');
		} else if (checkedNode.getParentNode() === null) {
			layer.alert('顶级组织不能删除！');
		} else {
			var msg;
			if (checkedNode.isParent) {
				msg = '此操作会一并删除下级组织，确认吗？';
			} else {
				msg = '确认删除吗？';
			}
			layer.confirm(msg, function(index) {
				$.ajax({
					url : '${pageContext.request.contextPath}/deleteOrganization',
					type : "post",
					dataType : "json",
					async : false,
					data : {
						organizationId : checkedNode.organizationId
					},
					success : function(data) {
						if (data.result === 0) {
							layer.msg('删除成功!', {
								icon : 1,
								time : 800
							});
							cancelEdit();
							loadTree();
						} else {
							layer.msg('系统繁忙，请稍后再试!', {
								icon : 2,
								time : 800
							});
						}
					},
					error : function() {
						layer.msg('系统繁忙，请稍后再试!', {
							icon : 2,
							time : 800
						});
						return false;
					}
				});
			});
		}
	}
</script>
</html>
